import { PageContainer, ActionType } from '@ant-design/pro-components';
import { Row, Col, Button, message } from 'antd';
import { ArrowRightOutlined } from '@ant-design/icons';
import { ModalForm, ProDescriptions, ProTable } from '@ant-design/pro-components';
import type { ProColumns } from '@ant-design/pro-components';
import React, { useRef, useState } from 'react';
import { auditOrderAuth, getAuidtOrders } from '@/services/ant-design-pro/api';

const Auth: React.FC = () => {
  const actionRef = useRef<ActionType>();
  const [, setSelectedRows] = useState<API.OrderData[]>([]);
  const [currentOrder, setCurrentOrder] = useState<API.OrderData>({});
  // 授权的modal
  const [authModalOpen, setAuthModalOpen] = useState(false);

  const columns: ProColumns<API.OrderData>[] = [
    {
      title: '工单ID',
      dataIndex: 'WorkOrderID',
      valueType: 'textarea',
    },
    {
      title: '流水号',
      dataIndex: 'SerialNum',
      tooltip: '授权请求的流水号',
    },
    {
      title: '门架',
      dataIndex: 'PortalName',
      sorter: true,
    },
    {
      title: '门架编号',
      dataIndex: 'PortalCode',
    },
    {
      title: '组织',
      sorter: true,
      dataIndex: 'Owner',
    },
    {
      title: '状态',
      sorter: true,
      dataIndex: 'Status',
    },
    {
      title: '授权时间',
      sorter: true,
      dataIndex: 'AuthTime',
      valueType: 'dateTime',
    },
    {
      title: '积分',
      sorter: true,
      dataIndex: 'Points',
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (_, order) => [
        <a
          key={order.ID}
          // TODO: 这里应该最好后台给状态码,或者就固定这个文字别再变了
          disabled={order.Status === '已授权'}
          onClick={() => {
            setAuthModalOpen(true);
            setCurrentOrder(order);
          }}
        >
          授权
        </a>,
      ],
    },
  ];

  return (
    <PageContainer>
      <Row gutter={[16, 10]}>
        <Col flex={'auto'}>
          <ProTable<API.OrderData, API.PageParams>
            headerTitle={'授权操作'}
            actionRef={actionRef}
            rowKey={'ID'}
            search={false}
            options={false}
            toolBarRender={() => [
              <Button
                type="primary"
                key="primary"
                onClick={() => {
                  // handleModalOpen(true);
                }}
              >
                批量授权操作
                <ArrowRightOutlined />
              </Button>,
            ]}
            columns={columns}
            request={getAuidtOrders}
            pagination={{
              defaultPageSize: 5,
              showSizeChanger: true,
            }}
            rowSelection={{
              onChange: (_, selectedRows) => {
                setSelectedRows(selectedRows);
              },
            }}
          />
        </Col>
      </Row>
      <ModalForm
        title="授权工单"
        width="400px"
        open={authModalOpen}
        onOpenChange={setAuthModalOpen}
        onFinish={async () => {
          const res = await auditOrderAuth({
            serialnum: currentOrder.SerialNum,
          });
          if (res.no === '0') {
            setAuthModalOpen(false);
            if (actionRef.current) {
              actionRef.current.reload();
            }
            message.success('授权成功!');
          } else if (res.no === '4602') {
            setAuthModalOpen(false);

            if (actionRef.current) {
              actionRef.current.reload();
            }
            message.warning('当前工单已经授权!');
          } else {
            if (actionRef.current) {
              actionRef.current.reload();
            }
            message.error('授权失败!');
          }
        }}
      >
        <ProDescriptions column={1}>
          <ProDescriptions.Item label="工单ID">{currentOrder.WorkOrderID}</ProDescriptions.Item>
          <ProDescriptions.Item label="门架">{currentOrder.PortalName}</ProDescriptions.Item>
          <ProDescriptions.Item label="门架编号">{currentOrder.PortalCode}</ProDescriptions.Item>
          <ProDescriptions.Item label="流水号">{currentOrder?.SerialNum}</ProDescriptions.Item>
          <ProDescriptions.Item label="组织">{currentOrder.Owner}</ProDescriptions.Item>
          <ProDescriptions.Item label="积分">{currentOrder.Points}</ProDescriptions.Item>
        </ProDescriptions>
      </ModalForm>
    </PageContainer>
  );
};

export default Auth;
